import React, { Component } from 'react'
import { Form, Input, Button, message } from 'antd';
import { _userLogin, _getCaptchaVerify } from "../Api/api"
import "./index.css"

export default class Login extends Component {
  state = {
    captCha: '',
    text: ""
  }
  // 获取验证码
  getCaptcha = async () => {
    const result = await _getCaptchaVerify();
    console.log(result);
    this.setState({
      captCha: '/verify?_t=' + new Date().getTime()
    })
  }


  render() {
    let { captCha } = this.state;
    const Demo = () => {
      // 登录提交
      const onFinish = async (values) => {

        values = { ...values, text: this.text.value };
        console.log('Success:', values);
        let { data } = await _userLogin(values);
        console.log(data)
        if (data.code === 1) {
          localStorage.setItem('token', data.token);  //  将返回的 token 保存在本地
          message.success('登录成功!').then(setTimeout(() => {  // 全局成功提示
            this.props.history.push("/home")
          }, 3600));
        } else {
          message.error(data.msg);   // 全局错误提示
        }
      };

      const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };

      return (
        <Form
          name="basic"
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 20,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="用户名"
            name="username"

            rules={[
              {
                required: true,
                message: '用户名不能为空!',
              },
            ]}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: '密码不能为空!',
              },
            ]}
          >
            <Input.Password placeholder="请输入密码" />
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 2,
              span: 22,
            }}
          >
            <div className="captcha">
              {/* 定义获取验证码 */}

              <input id="capinp" placeholder="请输入验证码" ref={c => this.text = c} />
              <img id="yzm" src={captCha} />
              <a href="#" className="getCaptcha" onClick={() => this.getCaptcha()}>获取验证码</a>
            </div>

            <Button block type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      );
    };
    return (
      <div className="form">
        <div className="login">
          <Demo />
          <span className="skip-registry" onClick={() => this.props.history.push('/registry')}>立即注册</span>
        </div>
      </div>
    )
  }
}
